<template>
	<view class="pb124">
		<view>
			<!-- 轮播图部分 -->
			<view class="pt26 auto" style="width: 690rpx;">
				<u-swiper :list="swiperList" height="300"></u-swiper>
			</view>
			<!-- banner部分 -->
			<view class="banner dflex alc mt36">
				<view
					class="banner-items dflex alc flexd flex1"
					v-for="(item, index) in bannerList"
					:key="item.id"
					@click="handerCalculateIncome(index)"
				>
					<view class="dflex alc jcc" :style="{ backgroundColor: item.backgroundColor }">
						<image :src="item.img" mode="widthFix" class="bannerImgae"></image>
					</view>
					<view class="mt16 fs28">{{ item.title }}</view>
				</view>
			</view>
			<!-- 广告部分 -->
			<view class="money mt26 w710 auto dflex alc jcsb">
				<view>
					<view style="color: #4A7EF3;" class="fs34 fw900 mt42 ml163">分享赚钱</view>
					<view class="ml163 mt10 dflex alc">
						<text style="color: #97A8CD;" class="fs24 mr14">速速查看</text>
						<view><u-icon name="arrow-right" color="#97A8CD" size="24"></u-icon></view>
					</view>
				</view>
				<view>
					<view style="color: #FF6551;" class="fs34 fw900 mt42 ml163">理财规划</view>
					<view class="ml163 mt10 dflex alc">
						<text style="color:#FC8E5E;" class="fs24 mr14">速速查看</text>
						<view><u-icon name="arrow-right" color="#FC8E5E" size="24"></u-icon></view>
					</view>
				</view>
			</view>

			<!-- 单元格部分 -->
			<view class="mt40 mb20"><Cell @getProducts="getProducts"></Cell></view>
			<!-- 数据 -->
			<view class="mb40" v-for="(item, index) in dataLists" :key="item.id">
				<IndexData :data="item" @goDetails="goDetails"></IndexData>
			</view>
		</view>


		<TabBar :select="0"></TabBar>
	</view>
</template>

<script setup>
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { indexGooods, getAd } from '@/utils/api.js';
import { bannerList } from './index.js';
import { onMounted, ref } from 'vue';
let limit = ref(0);

//跳转到更多产品页面
const getProducts = () => {
	uni.navigateTo({
		url: '/pages/productitem/productitem'
	});
};
//跳转到产品详情页面
const goDetails = id => {
	uni.navigateTo({
		url: '/pages/details/details?id=' + id
	});
};
// banner跳转
const handerCalculateIncome = index => {
	if (index === 0) {
		uni.switchTab({
			url: '/pages/product/product'
		});
	} else if (index === 1) {
		uni.navigateTo({
			url: '/pages/CalculateIncome/CalculateIncome'
		});
	} else if (index === 2) {
		uni.switchTab({
			url: '/pages/my/my'
		});
	} else if (index === 3) {
		uni.navigateTo({
			url: '/pages/SubscriptionReservation/SubscriptionReservation'
		});
	}
};
//首页轮播图
const swiperList = ref([]);
const getSwiper = () => {
	getAd().then(res => {
		swiperList.value = res.data;
		swiperList.value.map(el => (el.image = 'https://guoshengzichan.com' + el.url));
	});
};
//首页产品数据
let dataLists = ref([]);
const handerIndexList = () => {
	let data = {
		in_recommend: 1,
		type: 'all',
		limit: limit.value,
		page: 10
	};
	indexGooods(data).then(res => {
		if (limit.value == 0) {
			dataLists.value = res.data;
		}
		if (limit.value > 0) {
			if (res.data.length === 0) {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none'
				});
			} else {
				dataLists.value.push(...res.data);
			}
		}
		console.log(res.data);
	});
};
//触底加载
onReachBottom(() => {
	limit.value += 10;
	handerIndexList();
});
onLoad(() => {
	wx.hideTabBar();
	handerIndexList();
	getSwiper();
});
onMounted(()=>{
	let pageHead = document.getElementsByTagName('uni-page-head');
	pageHead[0].style.display = 'none';
})
</script>

<style lang="scss" scoped>
page {
	background-color: #fff;
}
.banner {
	color: #6d6d6d;
	.banner-items {
		& > view:nth-child(1) {
			width: 110rpx;
			height: 110rpx;
			background-color: red;
		}
		.bannerImgae {
			height: 100rpx;
			width: 100rpx;
		}
	}
}
.money {
	& > view {
		width: 335rpx;
		height: 178rpx;
		border-radius: 30rpx;
	}
	& > view:first-child {
		background: url('../../static/left.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	& > view:last-child {
		background: url('../../static/right.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
}

</style>
